<template>
  <div>
    <div class="content">
      <div class="container">
        <p> <i class="h" />事故基本信息</p>
        <ul class="basicInfo">
          <li>
            <span>事故编号</span>
            <input v-model="bizId" type="text" disabled="true">
          </li>
          <li>
            <span>事故时间</span>
            <input v-model="time" type="text" disabled="true">
          </li>
          <li>
            <span>事故地点</span>
            <input v-model="address" type="text" disabled="true">
          </li>
          <li>
            <span>天气状况</span>
            <input v-model="weather" type="text">
          </li>
          <li>
            <span>事故描述</span>
            <input v-model="description" type="text">
          </li>
          <!--
          <li>
              <button class="update" @click="updateTap">更新</button>
          </li>
          -->
        </ul>
      </div>
      <template v-for="(item, index) in persons">
        <div class="container" v-bind:key="index">
          <p class="litigant">
            <i class="h" />
            当事人{{index + 1}}
          </p>
          <ul class=" parties">
            <li>
              <span>姓名</span>
              <input v-model="item.name" type="text" disabled="true">
            </li>
            <li>
              <span>身份证号</span>
              <input v-model="item.idNumber" type="text">
            </li>
            <li>
              <span>手机号码</span>
              <input v-model="item.phone" type="text" disabled="true">
            </li>
            <li>
              <span>车辆信息</span>
              <input v-model="item.carInfo" type="text">
            </li>
            <li>
              <span>车牌号码</span>
              <input v-model="item.carNumber" type="text">
            </li>
            <li>
              <span>责任认定</span>
              <input v-model="item.duty" type="text" disabled="true">
            </li>
            <li>
              <span>签字</span>
              <img :src="item.sign | fileFilter" class="sign" alt="">
            </li>
            <!--
            <li>
                <button class="update" @click="updateLitigantList1Tap">更新</button>
            </li>
            -->
          </ul>
        </div>
      </template>
      <div class="acc-detail-vedio">
        <p><i class="h"></i>视频</p>
        <ul>
          <li>
            <video :src="videoPaths[0] | fileFilter" controls />
          </li>
          <li>
            <video :src="videoPaths[1] | fileFilter" controls />
          </li>
        </ul>
      </div>
      <div class="acc-detail-picture">
        <p><i class="h"></i>图片</p>
        <div class="layout-row-center">
          <template v-for="(item, index) in imagePaths">
            <img style="width: 200px; height: 200px" :key="index" :src="item" alt="" v-on:click="handleImagePreview">
          </template>
        </div>
      </div>
    </div>
    <image-viewer v-if="showViewer" :url-list="imagePaths" :on-close="closeViewer"/>
  </div>
</template>

<script>
import ImageViewer from "element-ui/packages/image/src/image-viewer";
let prevOverflow = '';
import CommonFilters from "@/mixins/CommonFilters";
import HttpConnection from "@/util/HttpConnection";
import {uploadImage} from "@/config/env";

export default {
  name: "AccidentDetail",
  components: { ImageViewer},
  mixins: [CommonFilters],
  data() {
    return {
      showViewer: false,
      bizId: "",
      weather: "",
      time: "",
      address: "",
      description: "",
      law: "",
      rule: "",
      persons: [],
      videoPaths: [],
      imagePaths: [],
    };
  },
  computed: {

  },
  mounted() {
    this.initDatail(this, this.$route.query.bizId);
  },
  methods: {
    // 初始化详情
    initDatail(that, bizId) {
      // let _userInfo = JSON.parse(localStorage.getItem("userInfo"));
      HttpConnection.post("/api-bureau/minorAccident/manager/detail", { // 详情
        bizId: bizId,
        // userId: _userInfo.id
      }).then(function(res) {
        console.log("-----", res);
        that.bizId = res.data.bizId;
        that.weather = res.data.weather;
        that.time = res.data.time;
        that.address = res.data.address;
        that.description = res.data.description;
        that.law = res.data.law;
        that.rule = res.data.rule;
        that.persons = res.data.persons;
        that.videoPaths = res.data.videoPaths;
        let _imagePaths = [];
        for (let item of res.data.imagePaths) {
          _imagePaths.push(uploadImage + item);
        }
        that.imagePaths = _imagePaths;
      }).catch(function(error) {
        console.log("-----", error)
      });
    },
    updateTap() {
      let that = this;
      HttpConnection.post("/api/minorAccident/manager/saveEditDeatil", {
        bizId: that.bizId,
        accidentPattern: that.description,
        weatherCondition: that.weather
      }).then(function(res) {
        that.$message({
          message: "更新成功!!!",
          type: "success"
        });
      });
    },
    updateLitigantList1Tap() {
      let that = this;
      HttpConnection.post("/api/minorAccident/manager/saveEditDeatil", {
        serialNumber: that.bizId,
        accidentPerson1: that.accidentPerson1
      }).then(function(res) {
        that.$message({
          message: "更新成功!!!",
          type: "success"
        });
      });
    },
    updateLitigantList2Tap() {
      let that = this;
      HttpConnection.post("/api/minorAccident/manager/saveEditDeatil", {
        serialNumber: that.bizId,
        accidentPerson2: that.accidentPerson2
      }).then(function(res) {
        that.$message({
          message: "更新成功!!!",
          type: "success"
        });
      });
    },
    handleImagePreview() {
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    }
  }
}
</script>

<style scoped lang="scss">
//@import 'src/styles/callpolice.scss';
.update{
  position: absolute;
  right: 71px;
  bottom: 6px;
  width: 60px;
  height: 35px;
  background:rgba(64,118,227,1);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.content{
  background: #fff;
  padding: 5px 80px;
  i.h{
    display: inline-block;
    width: 4px;
    height: 13px;
    background: #4076E3;
    margin-right: 6px;
  }
  .container{
    margin-top: 30px;
    p{
      color: #4076E3;
    }
    .litigant{
      border-bottom: 1px solid #D9D9D9;
      color: #4076E3;
      padding-bottom: 13px;

    }
    .basicInfo{
      position: relative;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;

      li{
        flex: 0 0 calc(50% - 10px);
        font-size: 14px;
        display: flex;
        span{
          color: #333;
          // margin-right: 20px;
          line-height: 50px;
          width: 70px;
        }
        input{
          flex: 1;
          height: 30px;
          margin-top: 10px;
          color: #999;
          padding-left: 10px;
          margin-right: 50px;
          border: 1px solid #D9D9D9;
        }
      }
    }
    .distribution{
      padding-bottom: 80px;
    }
    .parties{
      position: relative;
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      li{
        flex: 0 0 calc(50% - 10px);
        font-size: 14px;
        display: flex;
        span{
          color: #333;
          // margin-right: 20px;
          line-height: 50px;
          width: 70px;
        }
        input{
          flex: 1;
          height: 30px;
          margin-top: 10px;
          color: #999;
          padding-left: 10px;
          margin-right: 50px;
          border: 1px solid #D9D9D9;
        }
        .sign{
          width: 120px;
          height: 30px;
          margin-top: 10px;
        }
      }
    }
  }
  .acc-detail-picture{
    margin-top: 50px;
    p{
      padding-bottom: 10px;
    }
  }
  .acc-detail-vedio{
    margin-top: 50px;
    p{
      padding-bottom: 10px;
    }
    ul{
      overflow: hidden;
      margin-top: 10px;
      li{
        float: left;
        margin-right: 10px;
        video{
          width: 279px;
          height: 180px;
        }
      }
    }
  }
}
ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
}
</style>
